<template>
	<view>

		<view class="pageContainer">
			
			
			<!-- 类型 -->
			<view class="tabBox">
				<view 
					:class="'tabItem '+(subsectionCurrent==item.id?'active':'')"
					v-for="(item,index) in subsectionList"
					:key="index"
					@click="subsectionChange(item.id)">
					{{item.name}}
				</view>
				
			</view>

			<!-- 过滤 -->
			<view class="statisticsFilter_box">
				<!-- 年 -->
				<template v-if="subsectionCurrent==1">
					<u-tabs :list="yearList" :current="yearCurrent" :show-bar="false" inactive-color="#333"
						active-color="#000" bg-color="transparent" @change="yearChange"></u-tabs>
				</template>

				<!-- 月 -->
				<template v-if="subsectionCurrent==2">
					<u-tabs name="name2" :list="monthList" :current="monthCurrent" :show-bar="false"
						inactive-color="#333" active-color="#000" bg-color="transparent" @change="monthChange">
					</u-tabs>
				</template>

				<!-- 自定义 -->
				<view class="customTab_con" v-if="subsectionCurrent==3">
					<view class="customPicker">
						<view class="dateCon" @click="startClick">
							<text v-if="startDate">{{startDate}}</text>
							<text v-else>开始日期</text>
							<u-icon name="arrow-down-fill" color="#000"></u-icon>
						</view>
						<view class="dateLine">至</view>
						<view class="dateCon" @click="endClick">
							<text v-if="endDate">{{endDate}}</text>
							<text v-else>结束日期</text>
							<u-icon name="arrow-down-fill" color="#000"></u-icon>
						</view>
					</view>
					<!-- <view class="customPicker" @click="typeShow = true">
						<view class="dateCon">
							<text v-if="typeObj.label">{{typeObj.label}}</text>
							<text v-else>全部</text>
							<u-icon name="arrow-down-fill" color="#fff"></u-icon>
						</view>
					</view> -->
				</view>
			</view>


			<view class="selectBox">
				<view class="selectType" @click="typeShow = true">
					<view class="dateCon dateCon2">
						<text v-if="typeObj.label">{{typeObj.label}}</text>
						<text v-else>全部</text>
						<u-icon name="arrow-down-fill" color="#666"></u-icon>
					</view>
				</view>
				<view class="selectInput">
					<input type="text" placeholder="请输入关键词" :value="keyword" @input="keyInput">
				</view>
			</view>

			<!-- 记账类型弹窗 -->
			<u-select mode="single-column" v-model="typeShow" :list="typeList" @confirm="typeConfirm"></u-select>

			<!-- 工地信息 -->
			<!-- <view class="worksiteInfo_box">
				<view class="worksiteName">北京工地</view>
				<view class="worksiteInfo_con">
					<view class="statisticsCon">
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont" style="font-size: 40rpx;">3000</view>
							<view class="statisticsDesc">本月支出</view>
						</view>
					</view>
					<view class="statisticsCon">
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">3000</view>
							<view class="statisticsDesc">本月支出</view>
						</view>
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">3000</view>
							<view class="statisticsDesc">本月支出</view>
						</view>
						<view class="statisticsItem">
							<view class="statisticsMoney digitFont">3000</view>
							<view class="statisticsDesc">本月支出</view>
						</view>
					</view>
				</view>
			</view> -->
			
			
			
			
			
		</view>
		
		
		
		<view class="billLogBox">
			<view class="billTypeTile">
				记账流水
			</view>
			<view class="billLogMain">
				
				<view class="billItem" v-for="(billData,billTime) in billList" :key="billTime">
					<view class="logDate">
						{{billTime}}
					</view>
					<view class="logDateBox">
						<view class="logDateItem" v-for="(item,index) in billData" :key="index" >
							<view class="logIcon">
								<image :src="'/static/bill/billType'+item.account_type+'_active.png'" mode=""></image>
							</view>
							<view class="logDataMain">
								<view :class="'logName '+(item.remark?'':'logNameCenter')">
									{{item.pay_name}}<text v-if="item.add_uase_name">(记账人：{{item.add_uase_name}})</text>	
									<view class="logTime">
										{{item.add_date}}
									</view>
								</view>
								<view class="logRemark" v-if="item.remark">
									<text>{{item.remark}}</text>
									<image src="/static/img/imgIcon.png" mode="" v-if="item.imgUrl"></image>
								</view>
								
							</view>
							
							<view class="logMoney">
								{{item.cost}}元
							</view>
							<!-- <view class="logEditBtn" @click="editBill(item.id,item.account_type)">
								修改
							</view> -->
						</view>
					</view>
					
				</view>
				<view class="totalBox">
					总收入:{{totalIn}}元 / 总支出:{{totalOut}}元
				</view>
				
			</view>
		</view>
		
		
		<view style="width: 100%; height: 50rpx;"></view>

		<!-- 日期组件：type值单选single、多选multi -->
		<StartDate ref="startDate" type="single" @selected-change="startChange"></StartDate>
		<EndDate ref="endDate" type="single" @selected-change="endChange"></EndDate>
		
		
		
		

	</view>
</template>

<script>
	import StartDate from "@/components/date/date.vue"
	import EndDate from "@/components/date/date.vue"
	
	export default {
		components: {
			StartDate,
			EndDate
		},
		data() {
			return {
				// 类型
				subsectionList: [{
					name: '累计',
					id: '0',
				}, {
					name: '年',
					id: '1',
				}, {
					name: '月',
					id: '2',
				}, {
					name: '自定义',
					id: '3',
				}],
				subsectionCurrent: 0,

				// 年月数据
				yearList: JSON.parse(uni.getStorageSync('yearList')),
				monthList: JSON.parse(uni.getStorageSync('monthListTwo')),
				yearCurrent: -1,
				monthCurrent: -1,

				// 开始日期
				startDate: '',

				// 结束日期
				endDate: '',

				// 记账类型
				typeShow: false,
				typeList: [{
						value: '0',
						label: '全部'
					},
					{
						value: '1',
						label: '记人工'
					},
					{
						value: '2',
						label: '记材料'
					},
					{
						value: '3',
						label: '记杂费'
					},
					{
						value: '4',
						label: '记入款'
					},
				],
				typeObj: {
					value: '',
					label: ''
				},

				// 工地id
				project_id: '',

				// 工人id
				member_id: '',

				// 记录
				billList: [],
				billTotal: 0,
				keyword: '',
				
				totalIn:0,
				totalOut:0,
				billType:0,
			}
		},
		onLoad(option) {
			console.log(option)
			var _this = this;
			if(option.project_id){
				_this.project_id = option.project_id;
			}
			if(option.member_id){
				_this.member_id = option.member_id;
			}
			if(option.keyword){
				_this.keyword = option.keyword;
			}
		},
		onShow() {
			var _this = this;
			_this.getBillStatistics();
		},
		onReady() {

		},
		methods: {
			
			
			//编辑
			editBill(id,type){
				var _this=this;
				uni.navigateTo({
					url:'/pages/bill/billEdit?id='+id
				})
				
			},
			
			
			// 搜索
			keyInput(e) {
				var _this = this;
				_this.keyword = e.detail.value;
				_this.getBillStatistics();
			},

			// 选项卡
			subsectionChange(index) {
				var _this = this;
				_this.subsectionCurrent = index;

				_this.yearCurrent = -1;
				_this.monthCurrent = -1;
				_this.startDate = '';
				_this.endDate = '';

				// 累计
				if (index == 0) {
					_this.getBillStatistics();
				}
			},

			// 选择年
			yearChange(index) {
				var _this = this;
				_this.yearCurrent = index;
				_this.startDate = _this.yearList[_this.yearCurrent].start;
				_this.endDate = _this.yearList[_this.yearCurrent].end;

				_this.getBillStatistics();
			},

			// 选择月
			monthChange(index) {
				var _this = this;
				_this.monthCurrent = index;
				_this.startDate = _this.monthList[_this.monthCurrent].start;
				_this.endDate = _this.monthList[_this.monthCurrent].end;

				_this.getBillStatistics();
			},

			/**
			 * 开始日期 start
			 */
			// 打开选择日期弹窗
			startClick() {
				this.$refs.startDate.calendarShow = true;
			},

			// 日历选中日期事件回调
			startChange(dateStr) {
				console.log(dateStr);
				var _this = this;
				_this.startDate = dateStr;
				_this.getBillStatistics();
			},
			/**
			 * 开始日期 end
			 */

			/**
			 * 结束日期 start
			 */
			// 打开选择日期弹窗
			endClick() {
				this.$refs.endDate.calendarShow = true;
			},

			// 日历选中日期事件回调
			endChange(dateStr) {
				console.log(dateStr);
				var _this = this;
				_this.endDate = dateStr;
				_this.getBillStatistics();
			},
			/**
			 * 结束日期 end
			 */

			// 选择记账类型
			typeConfirm(e) {
				// console.log(e);
				var _this = this;
				_this.typeObj = e[0];
				_this.getBillStatistics();
			},

			// 获取统计数据
			getBillStatistics() {
				var _this = this;
				var type = _this.subsectionList[_this.subsectionCurrent].id;
				// console.log("类型：" + type);
				// console.log("开始日期：" + _this.startDate);
				// console.log("结束日期：" + _this.endDate);
				// console.log("记账类型：" + _this.typeObj);

				_this.$u.get('/api/project.account/getDataList', {
					project_id: _this.project_id,
					member_id: _this.member_id,
					type: type,
					start: _this.startDate,
					end: _this.endDate,
					account_type: _this.typeObj.value,
					keyword: _this.keyword,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取统计数据==");
					console.log(res);
					// 记录
					_this.billList = res.data;
					_this.billTotal = res.extend.total;
					
					_this.totalIn= res.extend.totalIn;
					_this.totalOut= res.extend.totalOut;
				}).catch(res => {
					console.log(res);
				})
			},
			
			// 记账详情
			billDetail(id) {
				uni.navigateTo({
					url: '../billDetail/billDetail?id=' + id
				})
			},

		}
	}
</script>


<style scoped lang="scss">
	
	.pageContainer {
		padding:0 30rpx;
	}
	// 类型
	.statisticsSubsection_box.firstSubsection {
		margin-bottom: 30rpx;
	}

	// 过滤
	.statisticsFilter_box {}

	// 自定义
	.customTab_con {
		padding: 20rpx 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.customPicker {
		display: flex;
		align-items: center;
	}

	.dateCon {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dateCon text {
		font-size: 28rpx;
		color: #000;
		margin-right: 5rpx;

	}

	.dateCon2 text {
		font-size: 28rpx;
		color: #000;
		margin-right: 5rpx;

	}

	.dateLine {
		color:#999;
		margin: 0 30rpx;
	}

	// 工地信息
	.worksiteInfo_box {
		padding: 30rpx;
		border-radius: 30rpx;
		background-color: #fff;
		box-shadow: 0 8rpx 16rpx 0rpx rgba(24, 24, 24, 0.13);
	}

	.worksiteName {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
	}

	.worksiteInfo_con {
		width: 100%;
		height: 224rpx;
		padding: 0 30rpx;
		
		background-size: contain;
		box-sizing: border-box;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.statisticsCon {
		overflow: hidden;
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.statisticsItem {
		flex: 1;
	}

	.statisticsMoney {
		font-size: 30rpx;
		color: #fff;
	}

	.statisticsDesc {
		font-size: 24rpx;
		color: #BCDEFD;
		margin-top: 10rpx;
	}

	
	//搜索

	.selectBox {
		margin-top: 20rpx;
		background-color: #fff;
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
	}

	.selectType {
		float: left;
		width: 200rpx;
		padding-left: 20rpx;
		text-align: center;
	}

	.selectInput {
		float: right;
		width: 490rpx;
		border-left: 2rpx solid #999;
		height: 40rpx;
		margin-top: 20rpx;
	}

	.selectInput input {
		line-height: 40rpx;
		padding-left: 30rpx;
	}
	
	.recordBtm_con {
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		overflow: hidden;
	}
	
	
	
	//流水
	.billLogBox{
		padding: 0 30rpx;
		width: 100%;
	}
	.logDate{
		margin-bottom: 20rpx;
	}
	.billLogMain{
		background-color:#fff;
		padding: 20rpx 20rpx 2rpx 20rpx;
		border-radius:10rpx;
		width: 100%;
		
		
	}
	.logDateBox{
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	.logDateItem{
		width: 100%;
		padding: 20rpx;
		overflow: hidden;
		border-bottom: 2rpx solid #f4f4f4;
		
	}
	.logIcon{
		width: 40rpx;
		height: 40rpx;
		float: left;
		margin-right: 10rpx;
		margin-top: 20rpx;
	}
	.logIcon image{
		width: 100%;
		height: 100%;
		
	}
	.logDataMain{
		width: 300rpx;
		float: left;
	}
	.logName{
		color: #000;
	}
	.logName text{
		font-weight: 400;
		font-size: 26rpx;
		color: #f90;
		padding-left: 10rpx;
	}
	.logNameCenter{
		line-height: 44rpx;
	}
	.logRemark{
		width: 250rpx;
		float: left;
	}
	.logRemark text{
		display: inline-block;
		max-width: 80%;
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
		color: #666;
		font-size: 22rpx;
		
	}
	.logRemark image{
		width: 22rpx;
		height: 22rpx;
		vertical-align: top;
		margin: 10rpx 0 0 10rpx;
	}
	.logMoney{
		width: 160rpx;
		float: right;
		color:#000;
		text-align: right;
		font-weight: bold;
		line-height: 80rpx;
		font-size: 26rpx;
		
	}
	.logEditBtn{
		font-size: 22rpx;
		width: 46rpx;
		padding: 10rpx;
		float: right;
		line-height: 22rpx;
		border: 2rpx solid #AFB0B3;
		border-radius: 16rpx;
		color:#666;
		margin-top: 8rpx;
	}
	
	
	
	
	//新添加的=====================
	.billTypeTile{
		height: 90rpx;
		line-height: 90rpx;
	}
	
	
	.tabBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		width: 100%;
		padding: 30rpx 0 10rpx 0;
		background-color: $uni-bg;
		border-radius: $uni-radius;
	}
	.tabItem{
		background-color:$uni-bg-blod; 
		color: $uni-color;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: $uni-radius;
		flex: 1;
		text-align: center;
		margin-left: 30rpx;
	}
	.tabItem.active{
		background-color: #327FE8;
		color: #fff;
	}
	.tabItem:first-child{
		margin-left: 0rpx;
	}
	
	.bottomBtnBox{
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;
		width: 690rpx;
	}
	
	.totalBox{
		text-align: center;
		padding: 10rpx 0 20rpx 0;
		color: #666;
	}
	
	.logTime{
		padding: 0;
		line-height: 30rpx;
		color: #999;
	}
</style>
